
<template>
  <div id="app" v-bind:style="appDivStyle">
    <div class="context" ref="context">
      <div class="queryBox" ref="queryBox">
        <el-form :inline="true" :model="formQueryCondition" ref="form" size="mini">
          <!--查询条件-->
          <!-- 演员编号 -->
          <el-form-item :label="$t('Actor.queryLabel.code')" :label-width="queryformLabelWidth">
            <el-input
              v-model.trim="formQueryCondition.actorCode.val"
              class="queryItemStyle"
              clearable
              :placeholder="$t('Actor.queryLabel.placeholderCode')"
            ></el-input>
          </el-form-item>
          <!-- 演员姓名 -->
          <el-form-item :label="$t('Actor.queryLabel.name')" :label-width="queryformLabelWidth">
            <el-input
              v-model.trim="formQueryCondition.actorName.val"
              class="queryItemStyle"
              clearable
              :placeholder="$t('Actor.queryLabel.placeholderName')"
            ></el-input>
          </el-form-item>
          <!-- 姓名简拼 -->
          <el-form-item :label="$t('Actor.queryLabel.pName')" :label-width="queryformLabelWidth">
            <el-input
              v-model.trim="formQueryCondition.actorPy.val"
              class="queryItemStyle"
              clearable
              :placeholder="$t('Actor.queryLabel.placeholderPName')"
            ></el-input>
          </el-form-item>
          <!-- 演员别名 -->
          <el-form-item :label="$t('Actor.queryLabel.byName')" :label-width="queryformLabelWidth">
            <el-input
              v-model.trim="formQueryCondition.actorAlName.val"
              class="queryItemStyle"
              clearable
              :placeholder="$t('Actor.queryLabel.placeholderByName')"
            ></el-input>
          </el-form-item>
          <!-- 性别 -->
          <el-form-item :label="$t('actorQueryLabel.role.sex')" :label-width="queryformLabelWidth">
            <el-select
              v-model="formQueryCondition.sex.val"
              class="queryItemStyle"
              placeholder="请选择"
            >
              <el-option :label="$t('label.all')" value></el-option>
              <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText" 
                                v-for="drug in gender"></el-option>
              <!-- <el-option :label="$t('label.man')" value="Man"></el-option>
              <el-option :label="$t('label.women')" value="Women"></el-option> -->
            </el-select>
          </el-form-item>
          <!-- 英文名 -->
          <el-form-item :label="$t('Actor.queryLabel.enName')" :label-width="queryformLabelWidth">
            <el-input
              v-model.trim="formQueryCondition.actorEnName.val"
              class="queryItemStyle"
              clearable
              :placeholder="$t('Actor.queryLabel.placeholderEnName')"
            ></el-input>
          </el-form-item>

          <!-- 审核状态 -->
          <el-form-item
            :label="$t('Actor.queryLabel.approvalStatus')"
            :label-width="queryformLabelWidth"
          >
            <el-select
              v-model="formQueryCondition.approvalStatus.val"
              class="queryItemStyle"
            >
              <el-option :label="$t('label.all')" value></el-option>
             <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText" 
                                v-for="drug in ApprovalStatus"></el-option>
            </el-select>
            <!-- 状态 -->
            <!-- <el-form-item :label="$t('AssetsProviderManage.queryLabel.status')"  :label-width="queryformLabelWidth">
                <el-select v-model="formQueryCondition.isEnable.val" class="queryItemStyle" >
                    <el-option :label="$t('label.all')" value=""></el-option>
                    <el-option :label="$t('label.available')" value="Available"></el-option>
                    <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
                </el-select>
            </el-form-item> -->
          </el-form-item>
          <!--事件按钮-->
          <div style="text-align:right">
            <!--返回-->
            <el-form-item v-if="isNeedGoBack">
              <el-button type="primary" @click="back" icon="el-icon-back">{{ $t('Actor.btnText.backBtnText') }}</el-button>
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="primary" @click="onGetPhoto">{{ $t('Actor.btnText.getPhotoBtnText') }}</el-button>
            </el-form-item> -->
            <el-form-item>
              <el-button v-permission="{menuCode: menuCode,resourceCode: 'saveActorBtnText'}" type="primary" @click="onNew">{{ $t('btnText.newBtnText') }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-permission="{menuCode: menuCode,resourceCode: 'resetActorBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-permission="{menuCode: menuCode,resourceCode: 'exportActorBtnText'}" type="primary" @click="onExport" icon="el-icon-download" :loading="loading" >{{ $t('btnText.exportBtnText') }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-permission="{menuCode: menuCode,resourceCode: 'ImportActorBtnText'}" type="primary" @click="onImport" icon="el-icon-upload2" >{{ $t('btnText.importBtnText') }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-permission="{menuCode: menuCode,resourceCode: 'queryActorBtnText'}" type="primary" @click="onQuery" icon="el-icon-search" :loading="loading" >{{ $t('btnText.queryBtnText') }}</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="dataBox" ref="dataBox">
        <!--数据表格-->
        <transition enter-active-class="animated zoomIn" leave-active-class="animated rotateOut">
          <el-table
            v-if="isInit"
            ref="singleTable"
            :data="tableData"
            :height="tableHeight"
            @sort-change="sortChange"
            v-loading="loading"
            size="mini"
            style="width: 100%;"
            stripe="stripe"
            border="border"
          >
            <el-table-column
              type="index"
              width="50"
              fixed="left"
              :label="$t('actorTable.xh')"
              align="center"
            ></el-table-column>
            <el-table-column :label="$t('table.op')" fixed="left" min-width="230">
              <template slot-scope="scope">
                <el-button v-permission="{menuCode: menuCode,resourceCode: 'editActorBtnText'}" size="gv" icon="el-icon-edit" :loading="loading" @click="onEdit(scope.$index, scope.row)" >{{ $t('btnText.editBtnText') }}</el-button>
                <el-button v-permission="{menuCode: menuCode,resourceCode: 'detailsActorBtnText'}" size="gv" icon="el-icon-search" :loading="loading" @click="onDetails(scope.$index, scope.row)" >{{ $t('btnText.detailsBtnText') }}</el-button>
                <!-- <el-button size="gv" icon="el-icon-delete"
                                          type="danger" :loading="loading" @click="deleteRow(scope.$index, scope.row)"
                >{{ $t('btnText.deleteBtnText') }}</el-button>-->
                <el-button v-permission="{menuCode: menuCode,resourceCode: 'auditingActorBtnText'}" size="gv" icon="el-icon-edit" :loading="loading" @click="onAuditing(scope.$index, scope.row)" >{{ $t('btnText.auditingBtnText') }}</el-button>
                <el-button v-permission="{menuCode: menuCode,resourceCode: 'passActorBtnText'}" size="gv" icon="el-icon-delete" type="danger" :loading="loading" @click="logoffRow(scope.$index, scope.row)" >{{ $t('btnText.logoffBtnText') }}</el-button>
                <!-- 重资产管理跳转过来显示的按钮为 -->
                <!-- <el-button v-permission="{menuCode: menuCode,resourceCode: 'editBtnText'}" size="gv" icon="el-icon-edit" :loading="loading" @click="onEdit(scope.$index, scope.row)" >{{ $t('btnText.editBtnText') }}</el-button>
                <el-button v-permission="{menuCode: menuCode,resourceCode: 'detailsBtnText'}" size="gv" icon="el-icon-search" :loading="loading" @click="onDetails(scope.$index, scope.row)" >{{ $t('btnText.detailsBtnText') }}</el-button>
                <el-button v-permission="{menuCode: menuCode,resourceCode: 'auditingBtnText'}" size="gv" icon="el-icon-edit" :loading="loading" @click="onAuditing(scope.$index, scope.row)" >{{ $t('btnText.auditingBtnText') }}</el-button>
                <el-button v-permission="{menuCode: menuCode,resourceCode: 'passBtnText'}" size="gv" icon="el-icon-delete" type="danger" :loading="loading" @click="logoffRow(scope.$index, scope.row)" >{{ $t('btnText.logoffBtnText') }}</el-button> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="actorCode"
              min-width="110"
              :label="$t('Actor.table.code')"
              sortable="custom"
              sort-by="actorCode"
            ></el-table-column>
            <el-table-column
              prop="actorName"
              min-width="110"
              :label="$t('Actor.table.name')"
              sortable="custom"
              sort-by="actorName"
            ></el-table-column>
            <el-table-column
              prop="actorPy"
              min-width="130"
              :label="$t('Actor.table.pName')"
              sortable="custom"
              sort-by="actorPy"
            ></el-table-column>
            <el-table-column
              prop="actorAlName"
              min-width="130"
              :label="$t('Actor.table.byName')"
              sortable="custom"
              sort-by="actorAlName"
            ></el-table-column>
            <el-table-column
              prop="approvalStatusName"
              min-width="130"
              :label="$t('Actor.table.approvalStatus')"
              sortable="custom"
              sort-by="approvalStatus"
            ></el-table-column>
            <el-table-column
              prop="sex"
              min-width="110"
              :label="$t('Actor.table.sex')"
              sortable="custom"
              sort-by="sex"
            ></el-table-column>
            <!-- <el-table-column
              prop="nationality"
              min-width="110"
              :label="$t('actorTable.nationality')"
              sortable="custom"
              sort-by="nationality"
            ></el-table-column> -->
            <el-table-column
              prop="actorEnName"
              min-width="110"
              :label="$t('Actor.table.enName')"
              sortable="custom"
              sort-by="actorEnName"
            ></el-table-column>
          </el-table>
        </transition>
      </div>
    </div>
    <div class="pageBox">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentPageChange"
        :current-page="pager.curPage"
        :page-sizes="pager.sizes"
        :page-size="pager.curSize"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.total"
      ></el-pagination>
    </div>

    <!--编辑对话框-->
    <transition enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
      <el-dialog :title="$t('label.dialogTitle')" :visible.sync="isEditForm" top="5vh">
        <el-form
          :inline="true"
          :model="editForm"
          ref="editForm"
          size="mini"
          :label-position="editFormPosition"
          status-icon="status-icon"
          :rules="editRules"
        >
          <!--基本信息-->
          <el-row>
            <el-col class="datacol titlecol" :span="titleSpan">{{ $t('Actor.editLabel.baseInfoTitle') }}</el-col>
          </el-row>
          <el-input v-model.trim="editForm.keyId"  v-show="false"></el-input>
          <!-- 演员编号 -->
          <el-form-item
            :label="$t('Actor.editLabel.code')"
            :label-width="editformLabelWidth"
            prop="actorCode" 
          >
            <el-input v-model.trim="editForm.actorCode" maxlength="20"></el-input>
          </el-form-item>
          <!-- 演员姓名 -->
          <el-form-item
            :label="$t('Actor.editLabel.name')"
            :label-width="editformLabelWidth"
            prop="actorName"
          >
            <el-input v-model.trim="editForm.actorName" maxlength="20"></el-input>
          </el-form-item>
          <!-- 姓名简拼 -->
          <el-form-item
            :label="$t('Actor.editLabel.pName')"
            :label-width="editformLabelWidth"
            prop="actorPy"
          >
            <el-input v-model.trim="editForm.actorPy" maxlength="50"></el-input>
          </el-form-item>
          <!-- 演员别名 -->
          <el-form-item
            :label="$t('Actor.editLabel.byName')"
            :label-width="editformLabelWidth"
            prop="actorAlName"
          >
            <el-input v-model.trim="editForm.actorAlName" maxlength="50"></el-input>
          </el-form-item>
          <!-- 性别 -->
          <el-form-item
            :label="$t('Actor.editLabel.sex')"
            :label-width="editformLabelWidth"
            prop="sex"
          >
            <el-select v-model="editForm.sex" placeholder="请选择" style="width:180PX;">
              <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText" 
                                v-for="drug in gender"></el-option>
              <!-- <el-option :label="$t('label.man')" value="Man"></el-option>
              <el-option :label="$t('label.women')" value="Women"></el-option> -->
            </el-select>
          </el-form-item>
           <!--职业-->
          <!-- <el-form-item
            :label="$t('Actor.editLabel.profession')"
            :label-width="editformLabelWidth"
            prop="profession"
          >
            <el-select v-model="editForm.profession" style="width:180px;">
              <el-option :label="$t('label.actor')" value="Actor"></el-option>
              <el-option :label="$t('label.screenwriter')" value="Screenwriter"></el-option>
              <el-option :label="$t('label.director')" value="Director"></el-option>
              <el-option :label="$t('label.host')" value="Host"></el-option>
              <el-option :label="$t('label.fieldService')" value="FieldService"></el-option>
            </el-select>
          </el-form-item> -->
          <!-- 英文名 -->
          <el-form-item
            :label="$t('Actor.editLabel.enName')"
            :label-width="editformLabelWidth"
            prop="actorEnName"
          >
            <el-input v-model.trim="editForm.actorEnName" maxlength="50"></el-input>
          </el-form-item>
         
          <!--头像-->
          <el-row>
            <el-form-item
              :label="$t('editLabel.actor.headPortrait')"
              :label-width="editformLabelWidth"
              prop="actorLogo"
            >
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
              <!-- <el-input ></el-input> -->
              <!-- <el-button type="primary" @click="update('form')">{{ $t('修改') }}</el-button> -->
            
            </el-form-item>
          <!--背景图片-->
            <el-form-item
              :label="$t('editLabel.actor.backgroundPicture')"
              :label-width="editformLabelWidth"
              prop="actorBgPic"
            >
              <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
              <!-- <el-input></el-input> -->
              <!-- <el-button type="primary" @click="update('form')">{{ $t('修改') }}</el-button> -->
            </el-form-item>
          </el-row>
          <!-- 作品信息 -->
          <el-form-item
            :label="$t('Actor.editLabel.worksInfo')"
            :label-width="editformLabelWidth"
            prop="actorInformation"
          >
            <el-input v-model.trim="editForm.actorInformation" type="textarea" :rows="2" placeholder="请输入内容" style="width:490px;"></el-input>
          </el-form-item>
          <!--简介-->
          <el-row>
            <el-form-item
              :label="$t('Actor.editLabel.summary')"
              :label-width="editformLabelWidth"
              prop="actorDesc"
            >
              <el-input v-model.trim="editForm.actorDesc" type="textarea" :rows="2" placeholder="请输入内容" style="width:490px;"></el-input>
            </el-form-item>
          </el-row>

          <!--隐私信息-->
          <!-- <el-row>
            <el-col class="datacol titlecol" :span="titleSpan">{{ $t('隐私信息') }}</el-col>
          </el-row>
          <el-form-item
            :label="$t('editLabel.actor.bornDate')"
            :label-width="editformLabelWidth"
            prop="bornDate"
          >
            <el-date-picker v-model="editForm.bornDate" class="queryItemStyle" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('editLabel.actor.constellation')"
            :label-width="editformLabelWidth"
            prop="constellation"
          >
            <el-select v-model="editForm.constellation" style="width:180px;">
              <el-option :label="$t('白羊座')" value="1"></el-option>
              <el-option :label="$t('水平座')" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('editLabel.actor.hight')"
            :label-width="editformLabelWidth"
            prop="hight"
          >
            <el-input v-model.trim="editForm.hight" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('editLabel.actor.weight')"
            :label-width="editformLabelWidth"
            prop="weight"
          >
            <el-input v-model.trim="editForm.weight" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('editLabel.actor.bloodType')"
            :label-width="editformLabelWidth"
            prop="bloodType"
          >
            <el-select v-model="editForm.bloodType" style="width:180px;">
              <el-option :label="$t('A')" value="1"></el-option>
              <el-option :label="$t('AB')" value="2"></el-option>
              <el-option :label="$t('B')" value="1"></el-option>
              <el-option :label="$t('O')" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('editLabel.actor.graduateInstitutions')"
            :label-width="editformLabelWidth"
            prop="graduateInstitutions"
          >
            <el-input v-model.trim="editForm.graduateInstitutions" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('editLabel.actor.nationality')"
            :label-width="editformLabelWidth"
            prop="nationality"
          >
            <el-input v-model.trim="editForm.nationality" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('editLabel.actor.homePlace')"
            :label-width="editformLabelWidth"
            prop="homePlace"
          >
            <el-input v-model.trim="editForm.homePlace" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('editLabel.actor.microblog')"
            :label-width="editformLabelWidth"
            prop="microblog"
          >
            <el-input v-model.trim="editForm.microblog" maxlength="50"></el-input>
          </el-form-item> -->


          <!--作品信息-->
          <!-- <el-row>
            <el-col class="datacol titlecol" :span="titleSpan">{{ $t('作品信息') }}</el-col>
          </el-row>
          <el-form-item
            :label="$t('editLabel.actor.musicWorks')"
            :label-width="editformLabelWidth"
            prop="musicWorks"
          >
            <el-input v-model="editForm.musicWorks" maxlength="100"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('editLabel.actor.score')"
            :label-width="editformLabelWidth"
            prop="score"
          >
            <el-input v-model.trim="editForm.score" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('editLabel.actor.heat')"
            :label-width="editformLabelWidth"
            prop="heat"
          >
            <el-input v-model.trim="editForm.heat" maxlength="50"></el-input>
          </el-form-item> -->
          

        </el-form>
        <div slot="footer">
          <el-button
            size="mini"
            @click="isEditForm = false"
            :loading="loading"
          >{{ $t('btnText.cancelBtnText') }}</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="submitEditForm('editForm')"
            :loading="loading"
          >{{ $t('btnText.saveBtnText') }}</el-button>
        </div>
      </el-dialog>
    </transition>

    <!--详情对话框-->
    <transition enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
      <el-dialog :title="$t('详情信息')" :visible.sync="isShowEditForm2" top="5vh">
        <el-form
          :inline="true"
          :model="editForm"
          ref="editForm"
          size="mini"
          :label-position="editFormPosition"
          status-icon="status-icon"
          :rules="editRules"
        >
          <!--基本信息-->
          <el-row class="datarow">
            <el-col class="datacol titlecol" :span="titleSpan">{{ $t('基本信息') }}</el-col>
          </el-row>
          <!-- 头像 -->
          <el-row class="datarow">
             <el-col class="labcol" :span="labelSpan">{{ $t('editLabel.actor.headPortrait') + ":" }}</el-col>
             <el-col class="datacol" :span="dDataSpan"><img v-bind:src="'/static/img/你好，旧时光.jpg'" height="100" width="70"></el-col>
          </el-row>
          <el-row class="datarow bgrow">
            <el-col class="labcol" :span="labelSpan">{{ $t('editLabel.actor.name') + ":" }}</el-col>
            <el-col class="datacol" :span="dataSpan">{{ editForm.actorName }}</el-col>
          </el-row>
          <el-row class="datarow">
            <el-col class="labcol" :span="labelSpan">{{ $t('editLabel.actor.byName') + ":" }}</el-col>
            <el-col class="datacol" :span="dataSpan">{{ editForm.actorAlName }}</el-col>
            <el-col class="labcol" :span="labelSpan">{{ $t('editLabel.actor.sex') + ":" }}</el-col>
            <el-col class="datacol" :span="dataSpan">{{ editForm.sex}}</el-col>
          </el-row>
          <el-row class="datarow bgrow">
            <el-col class="labcol" :span="labelSpan">{{ $t('editLabel.actor.enName') + ":" }}</el-col>
            <el-col class="datacol" :span="dataSpan">{{ editForm.actorEnName }}</el-col>
            <el-col class="labcol" :span="labelSpan">{{ $t('editLabel.actor.pName') + ":" }}</el-col>
            <el-col class="datacol" :span="dataSpan">{{ editForm.actorPy }}</el-col>
          </el-row>

          <!--背景图片-->
          <el-row class="datarow">
            <el-col
              class="labcol"
              :span="labelSpan"
            >{{ $t('editLabel.actor.backgroundPicture') + ":" }}</el-col>
            <el-col class="datacol" :span="dataSpan">{{ editForm.actorBgPic }}</el-col>
          </el-row>
          <!--作品信息-->
          <el-row class="datarow bgrow">
            <el-col class="labcol" :span="labelSpan">{{ $t('editLabel.actor.actorInformation') + ":" }}</el-col>
            <el-col
              class="datacol"
              :span="dataSpan"
              type="textarea"
              :rows="2"
            >{{ editForm.actorInformation }}</el-col>
          </el-row>
          <!--简介-->
          <el-row class="datarow">
            <el-col class="labcol" :span="labelSpan">{{ $t('editLabel.actor.synopsis') + ":" }}</el-col>
            <el-col
              class="datacol"
              :span="dataSpan"
              type="textarea"
              :rows="2"
            >{{ editForm.actorDesc }}</el-col>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button
            size="mini"
            @click="isShowEditForm2 = false"
            :loading="loading"
          >{{ $t('btnText.cancelBtnText') }}</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="isShowEditForm2 = false"
            :loading="loading"
          >{{ $t('btnText.saveBtnText') }}</el-button>
        </div>
      </el-dialog>
    </transition>

    <!--审核对话框-->
    <el-dialog :title="$t('assetsAudit.auditing')" :visible.sync="isShowAuditForm" top="5vh" width="60%">
      <el-form :model="auditForm" ref="editForm" size="mini" :label-position="editFormPosition" status-icon="status-icon"
        :rules="auditRules" >
        <el-form-item :label="$t('assetsAudit.auditSuggestion')" :label-width="editformLabelWidth" prop="reviewDesc">
          <el-input v-model.trim="auditForm.reviewDesc" type="textarea" :rows="2" placeholder="请输入内容" ></el-input>
        </el-form-item>
        <el-form-item :label-width="editformLabelWidth">
          <el-button size="mini" type="primary" @click="success" :loading="loading" >{{$t('assetsAudit.pass')}}</el-button>
          <el-button size="mini" type="primary" @click="submitFormForReject('editForm')" :loading="loading" >{{$t('assetsAudit.reject')}}</el-button>
          <el-button size="mini" @click="isShowAuditForm = false" :loading="loading" >{{ $t('btnText.cancelBtnText') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import comBaseVue from "../../baseViewModel";

export default {
  mixins: [comBaseVue],
  name: "Actor",
  props: {
    isNeedGoBack: Boolean,
    curRootAssets: Object,
    menuCode: String
  },
  data() {
    return {
      imageUrl: '',
      // 是否正在提交中
      loading: false,
      //真正的实体类名称
      modelName: "com.ispr.iptv.entity.media.MediaActor",
      // 是否正在提交中
      loading: false,
      isInit: false,
      isNonEditable: false,
      tableData: [],
      gender: [],
      ApprovalStatus: [],
      isShowAuditForm: false,
      //编辑布局
      //标题
      titleSpan: 24,
      labelSpan: 3,
      dataSpan: 9,
      appDivStyle: {
        height: this.$store.getters.appHeight
      },
      // 查询条件
      formQueryCondition: {
        actorCode: {
          key: "actorCode",
          op: "LIKE", // 操作符
          val: "" // 查询的值
        },
        actorName: {
          key: "actorName",
          op: "LIKE", // 操作符
          val: "" // 查询的值
        },
        actorPy: {
          key: "actorPy",
          op: "LIKE", // 操作符
          val: "" // 查询的值
        },
        actorAlName: {
          key: "actorAlName",
          op: "LIKE", // 操作符
          val: "" // 查询的值
        },
        sex: {
          key: "sex",
          op: "=", // 操作符
          val: "" // 查询的值
        },
        actorEnName: {
          key: "actorEnName",
          op: "LIKE", // 操作符
          val: "" // 查询的值
        },
        isEnable: {
                key: 'isEnable',
                op: '=', // 操作符
                val: 'Available'
            },
        approvalStatus: {
                key: 'approvalStatus',
                op: '=', // 操作符
                val: ''
            },
      },
      queryformLabelWidth: "75px",
      editformLabelWidth: "120px",
      editFormPosition: "right",
      // 分页对象
      pager: {
        curPage: 1,
        sizes: [20, 30, 50, 100, 200, 400],
        curSize: 20,
        total: 0
      },
      // 排序对象
      sort: {
        key: "keyId",
        dir: "Desc"
      },
      // 是否显示编辑面板
      isEditForm: false,
      isShowEditForm2: false,
      // 当前编辑面板执行的命令
      curCommand: "SaveNew",
      canEditCode: false,
      // 编辑面板绑定的对象
      editForm: {
        keyId: 0,
        version: 0,
        actorCode: "",
        actorName: "",
        actorPy: "",
        actorAlName: "",
        sex: "",
        actorEnName: "",
        actorLogo: "",
        actorBgPic: "",
        actorInformation: "",
        actorDesc: "",
      },
      editRules: {
        actorCode: [{required: true,message: this.$i18n.t("Actor.rules.code"),trigger: "blur"}],
        actorName: [{required: true,message: this.$i18n.t("Actor.rules.name"),trigger: "blur"}],
        sex: [{ required: true,message: this.$i18n.t("Actor.rules.sex"),trigger: "blur"}],
        actorPy: [{required: true,message: this.$i18n.t("Actor.rules.janeSpell"),trigger: "blur"}],
        // actorLogo: [{required: true,message: this.$i18n.t("Actor.rules.headPortrait"),trigger: "blur"}],
      },
      //审核面板绑定属性
      auditForm: {
        keyId: "",
        version: 0,
        assetVersion: "",
        reviewDataType: "",
        isEnable: "",
        approvalStatus: "",
        reviewDesc: "",
      },
      // 审核面板的验证规则
      auditRules: {
        reviewDesc: [{required: true,message: this.$i18n.t("assetsAudit.rules.auditSuggestion"),trigger: "blur"}],
      }
    };
  },
  methods: {
    // 新增
    onNew: function() {
      this.isEditForm = true;
      if (this.$refs["editForm"]) {
        this.$refs["editForm"].resetFields();
      }
      this.editForm.keyId = "";
      this.editForm.version = "";
      this.editForm.actorCode = "";
      this.editForm.actorName = "";
      this.editForm.actorPy = "";
      this.editForm.actorAlName = "";
      this.editForm.sex = "";
      this.editForm.actorEnName = "";
      this.editForm.actorLogo = "";
      this.editForm.actorBgPic = "";
      this.editForm.actorInformation = "";
      this.editForm.actorDesc = "";
      this.editForm.isEnable = "Available";
      this.editForm.approvalStatus = "PendingReview";
      this.curCommand = "SaveNewReturnPK";
      // this.canEditCode = false;
      this.isNonEditable = true;
    },
    // 查询按钮
    onQuery: function() {
      this.pager.curPage = 1;
      this.queryTable();
    },
    // 重置
    onReset: function() {
      if (this.$refs["form"]) {
        this.$refs["form"].resetFields();
      }
      this.formQueryCondition.actorCode.val = "";
      this.formQueryCondition.actorName.val = "";
      this.formQueryCondition.actorPy.val = "";
      this.formQueryCondition.actorAlName.val = "";
      this.formQueryCondition.sex.val = "";
      this.formQueryCondition.actorEnName.val = "";
      this.formQueryCondition.approvalStatus.val = "PendingReview";
      
    },

    // 导出按钮
    onExport: function() {
      this.$message({
        message: this.$i18n.t("操作成功"),
        type: "success"
      });
    },
    //导入按钮
    onImport: function() {
      this.$message({
        message: this.$i18n.t("操作成功"),
        type: "success"
      });
    },
    //审核按钮
    // onAuditing: function() {
    //   this.$message({
    //             message: this.$i18n.t("操作成功" ),
    //             type: 'success'
    //             });
    // },
    onAuditing: function(index, row) {
      // this.isAuditInfoForm = true;
        this.auditForm.assetVersion = row.version;
        this.auditForm.reviewDesc = "";
        this.auditForm.reviewDataId= row.keyId,      
        this.auditForm.reviewDataType= "ACTOR",
        this.auditForm.isEnable= "Available",
      // this.auditRules.auditSuggestion.message = "";
      this.isShowAuditForm = true;
    },
    //审核通过
    success: function() {
      this.auditForm.approvalStatus= "ExaminationPassed",        
        //this.auditForm.opType= "ExaminationPassed",        
        this.loading = true;
         this.procCommand("MediaAuditProc",
            "com.ispr.iptv.entity.media.MediaActor",
            "Default",
            {
                "keyId":this.auditForm.reviewDataId,
                "version":this.auditForm.assetVersion,
                "approvalStatus":this.auditForm.approvalStatus,
                "reviewHisEntity":this.auditForm
            },
            this.commonCallback);
    },
    //审核未通过
    submitFormForReject: function (formName) {            
        var _this = this;
        this.auditForm.approvalStatus= "TheAuditFailed",
        this.$refs[formName].validate(function (valid) {
            if (valid) {
                _this.loading = true;
                _this.procCommand("MediaAuditProc",
                "com.ispr.iptv.entity.media.MediaActor",
                "Default",
                {
                    "keyId":_this.auditForm.reviewDataId,
                    "version":_this.auditForm.assetVersion,
                    "approvalStatus":_this.auditForm.approvalStatus,
                    "reviewHisEntity":_this.auditForm
                },
                _this.commonCallback);
            } else {
                return false;
            }
        });
    },
    commonCallback: function (isSuccess,json) {
        this.loading = false;
        this.isShowAuditForm = false;
        if(isSuccess){
            this.$message({
                message: this.$i18n.t("message.successTip"),//resource.message.successTip,
                type: 'success'
            });
            this.queryTable();
        }
        else
        {
            this.$message({
                message: json.msg,
                type: 'warning'
                });
        }
    },
    //详情按钮
    onDetails: function(index, row) {
      //dataAccess.queryDomainModelByKeyID(this, modelName, "Query", row.keyID, true, this.$options.methods.editCallback);
      this.queryModelByKeyID(
        this.modelName,
        row.keyId,
        "Query",
        this.onDetailsCallback
      );
    },

    onDetailsCallback: function(isSuccess, json) {
      if (isSuccess) {
        this.isShowEditForm2 = true;
        if (this.$refs["editForm"]) {
          this.$refs["editForm"].resetFields();
        }
        this.editForm.keyId = json.keyId;
        this.editForm.actorCode = json.actorCode;
        this.editForm.actorName = json.actorName;
        this.editForm.actorPy = json.actorPy;
        this.editForm.actorAlName = json.actorAlName;
        this.editForm.sex = json.sex;
        this.editForm.actorEnName = json.actorEnName;
        this.editForm.actorInformation = json.actorInformation;
        this.editForm.actorDesc = json.actorDesc;
        this.editForm.actorLogo = "1234";
        this.editForm.approvalStatus = "PendingReview";
        this.canEditCode = false;
      } else {
        this.$message({
          message: json.msg,
          type: "warning"
        });
      }
    },
    // // 提交编辑面板数据
    // submitForm2: function submitForm2(formName) {
    //   var _this = this;

    //   this.$refs[formName].validate(function(valid) {
    //     if (valid) {
    //       _this.loading = true;
    //       _this.procCommand(
    //         _this.curCommand,
    //         _this.modelName,
    //         "Default",
    //         _this.editForm,
    //         _this.submitForm2Callback
    //       );
    //     } else {
    //       return false;
    //     }
    //   });
    // },
    // // 执行命令后的回调函数
    // submitForm2Callback: function submitForm2Callback(isSuccess, json) {
    //   this.loading = false;
    //   if (isSuccess) {
    //     this.isShowEditForm2 = false;
    //     this.$message({
    //       message: this.$i18n.t("message.successTip"), //resource.message.successTip,
    //       type: "success"
    //     });
    //     this.queryTable();
    //   } else {
    //     this.$message({
    //       message: this.$i18n.t("errorCode." + json.reason),
    //       type: "warning"
    //     });
    //   }
    // },
    //提取图片按钮
    onGetPhoto: function() {
      this.$message({
        message: this.$i18n.t("操作成功"),
        type: "success"
      });
    },
    // 分页容量变化
    sizeChange: function(val) {
      this.pager.curPage = 1;
      this.pager.curSize = val;
      this.queryTable();
    },
    // 分页按钮
    currentPageChange: function(val) {
      this.pager.curPage = val;
      this.queryTable();
    },
    // 生成网格的序号
    indexCreate: function(index) {
      return (this.pager.curPage - 1) * this.pager.curSize + (index + 1);
    },
    // 排序回调函数
    sortChange: function(sortObj) {
      console.log(sortObj);
      this.pager.curPage = 1;
      this.sort.key = sortObj.column.sortBy;
      if (sortObj.order == "ascending") {
        this.sort.dir = "asc";
      } else {
        this.sort.dir = "desc";
      }
      this.queryTable();
    },

    // 编辑按钮单击事件
    onEdit: function(index, row) {
      //dataAccess.queryDomainModelByKeyID(this, modelName, "Query", row.keyID, true, this.$options.methods.editCallback);
      this.queryModelByKeyID(
        this.modelName,
        row.keyId,
        "Query",
        this.editCallback
      );
    },
    // 编辑按钮回调事件
    editCallback: function(isSuccess, json) {
      if (isSuccess) {
        this.curCommand = "PartialUpdateProc";
        this.isEditForm = true;
        if (this.$refs["editForm"]) {
          this.$refs["editForm"].resetFields();
        }
        // this.editForm = json;
        // this.canEditCode = true;
        this.editForm.keyId = json.keyId;
        this.editForm.actorCode = json.actorCode;
        this.editForm.actorName = json.actorName;
        this.editForm.actorPy = json.actorPy;
        this.editForm.actorAlName = json.actorAlName;
        this.editForm.sex = json.sex;
        this.editForm.actorEnName = json.actorEnName;
        this.editForm.actorInformation = json.actorInformation;
        this.editForm.actorDesc = json.actorDesc;
        this.editForm.actorLogo = "1234";
        this.editForm.approvalStatus = "PendingReview";
        this.editForm.version = json.version;
       
        this.isNonEditable = true;
      } else {
        this.$message({
          message: json.msg,
          type: "warning"
        });
      }
    },

    // 删除按钮
    deleteRow: function(index, row) {
      var _this = this;
      this.$confirm(
        this.$i18n.t("message.confirmDelMessage"),
        this.$i18n.t("message.confirmTitle"),
        {
          confirmButtonText: this.$i18n.t("message.yes"),
          cancelButtonText: this.$i18n.t("message.cancel"),
          type: "warning",
          callback: function(action, instance) {
            if (action == "confirm") {
              console.log(_this);
              console.log(row);
              var commandBody = {
                data: [{ keyID: row.keyID, ver: row.version }],
                count: 1
              };
              _this.loading = true;
              _this.procCommand(
                "DelProc",
                _this.modelName,
                "N",
                commandBody,
                _this.submitFormCallback
              );
            }
          }
        }
      );
    },
    // 查询网格数据
    queryTable: function() {
      this.loading = true;
      this.queryModel(
        this.modelName,
        "Query",
        this.formQueryCondition,
        this.pager,
        this.sort,
        this.setTableData
      );
    },
    // 查询网格数据成功后的回调
    // setTableData: function(isSuccess, json) {
    //   this.loading = false;
    //   try {
    //     if (isSuccess) {
    //       this.pager.total = json.recordCount;
    //       this.tableData = [];
    //       for (var i = 0; i < json.queryResult.length; i++) {
    //         this.tableData.push(json.queryResult[i]);
    //       }
    //     } else {
    //       this.$message.error(this.$i18n.t("errorCode." + json.reason));
    //     }
    //   } catch (e) {
    //     alert(e);
    //   }
    // },
    // 提交编辑面板数据
    submitEditForm: function (formName) {
      var _this = this;

      this.$refs[formName].validate(function(valid) {
        if (valid) {
          _this.loading = true;
          _this.procCommand(
            _this.curCommand,
            _this.modelName,
            "Default",
            _this.editForm,
            _this.submitFormCallback
          );
        } else {
          return false;
        }
      });
    },
    // 执行命令后的回调函数
    submitFormCallback: function (isSuccess, json) {
      this.loading = false;
      if (isSuccess) {
        this.isEditForm = false;
        this.$message({
          message: this.$i18n.t("message.successTip"), //resource.message.successTip,
          type: "success"
        });
        this.queryTable();
      } else {
        this.$message({
          message: json.msg,
          type: "warning"
        });
      }
    },

      //回退事件
      back: function(isSuccess, json) {
        //this.$router.go(-1);//后退
        this.$parent.setCurrentComponent("goBack", null);
      },
      // 为性别下拉框赋值
    findGender: function() {
        this.findByTypeCode("10003",this.setGender)
    },
    // 查询性别下拉框数据成功后的回调
    setGender: function(isSuccess,json) {
        try{
            if (isSuccess) {
                this.gender = [];
                for (var i = 0; i < json.data.length; i++) {
                    this.gender.push(json.data[i]);
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },
        // 为资产状态下拉框赋值
    findApprovalStatus: function() {
        this.findByTypeCode("10007",this.setApprovalStatus)
    },
    // 查询资产状态下拉框数据成功后的回调
    setApprovalStatus: function(isSuccess,json) {
        try{
            if (isSuccess) {
                this.ApprovalStatus = [];
                for (var i = 0; i < json.data.length; i++) {
                    this.ApprovalStatus.push(json.data[i]);
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },
      initTable:function(){
          this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
          this.isInit = true;
      },

      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }


  },
  computed: {
      dDataSpan:function(){
          return 24 - this.labelSpan;
      }
  },
  mounted: function mounted() {
      this.findGender();
      this.findApprovalStatus();
      this.formQueryCondition.approvalStatus.val = "PendingReview";
      this.onQuery();
      window.setTimeout(this.initTable,100);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  height: 100%;
  width: 100%;
  font-size: 14px;
  color: #333333;
  font-family: "Microsoft YaHei";
}
.datarow {
  border: 1px solid #eeeeee;
  padding: 0px 0px 0px 0px;
  margin-bottom: 0px;
  &:last-child {
    margin-bottom: 0;
  }
}

.titlecol {
  font-weight: bold;
}

.labcol {
  padding: 3px 3px 3px 5px;
  border-radius: 4px;
  font-size: 14px;
  text-align: right;
  border-right: 1px solid #eeeeee;
}

.datacol {
  padding: 3px 3px 3px 3px;
  border-radius: 0px;
  text-align: left;

  vertical-align: middle;
  border-right: 1px solid #eeeeee;
}

.bgrow {
  background-color: #d4f1ff;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }


</style>

